<template>
  <div>
    <div class="most-expected">
      <div>近期最受期待</div>
      <div class="most-expected-list">
        <div v-for="item in waitlist" :key="item.id" class="img">
          <div class="imglist">
            <div class="toggle-wish">
              <span></span>
            </div>
            <img :src="item.img">
            <div><span>{{item.wish}}</span><span>人想看</span></div>
          </div>
          <div class="nm">{{item.nm}}</div>
          <div class="ct">{{item.comingTitle}}</div>
        </div>
      </div>

    </div>
    <div class="coming">
      <div>{{comingdate}}</div>
      <div v-for="item in cominglist" :key="item.id" class="mainitem">
        <div><img :src="item.img" alt=""></div>
        <div class="item">
          <div class="title">{{item.nm}}</div>
          <div><span class="person">{{item.wish}}</span><span>人想看</span></div>
          <div><span>主演：</span><span>{{item.star}}</span></div>
          <div><span>{{item.rt}}</span><span>上映</span></div>
        </div>
        <div>
          <button v-if="item.showst==4">预售</button>
          <button v-if="item.showst==1" class="want">想看</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "wait",
  data: function () {
    return {
      waitlist: [],
      cominglist: [],
      comingdate: ""
    }
  },
  mounted () {
    axios.get('/ajax/mostExpected?ci=57&limit=10&offset=0&token=&optimus_uuid=A1411130C83511EBB4C89D9CE0590754D99726EE43F74ACFAB86D17B35714FDA&optimus_risk_level=71&optimus_code=10')
      .then(res => {
        console.log(res.data.coming);
        this.waitlist = res.data.coming
        this.waitlist.forEach(item => {
          item.img = item.img.replace('w.h', '85.115')
        });
      })
    axios.get('/ajax/comingList?ci=57&token=&limit=10&optimus_uuid=A1411130C83511EBB4C89D9CE0590754D99726EE43F74ACFAB86D17B35714FDA&optimus_risk_level=71&optimus_code=10')
      .then(res => {
        console.log(res)
        this.cominglist = res.data.coming
        this.cominglist.forEach(item => {
          this.comingdate = item.comingTitle
        })
        this.cominglist.forEach(item => {
          item.img = item.img.replace('w.h', '64.90')
        })
      })
  }
};
</script>

<style scoped>
.most-expected {
  width: 358px;
  height: 216px;
  padding: 12px 10px 12px 15px;
  margin: 0 0 10px;
  background: #fff;
  box-sizing: border-box;
}
.most-expected > div:first-of-type {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}
.most-expected-list {
  width: 343px;
  height: 161px;
  display: flex;
  overflow: scroll;
  white-space: nowrap;
}
.nm {
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
}
.ct {
  font-size: 12px;
}
.img {
  position: relative;
  display: inline-block;
  width: 85px;
  margin-right: 10px;
}
.toggle-wish {
  width: 28px;
  height: 28px;
  line-height: 28px;
  background: rgba(61, 63, 71, 0.6);
  border-bottom-right-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
}
.toggle-wish > span {
  background-image: url("");
  position: absolute;
  display: inline-block;
  top: 8px;
  left: 8px;
  width: 10px;
  height: 10px;
  background-size: 100%;
  background-repeat: no-repeat;
}
.imglist {
  width: 85px;
}
.imglist img {
  width: 85px;
  height: 115px;
}
.imglist > span {
  position: absolute;
}
.imglist > div:nth-of-type(2) {
  position: absolute;
  left: 5px;
  top: 100px;
  font-size: 12px;
  color: #faaf00;
  font-weight: 700;
}

/******most-expected-list*********/
.coming {
  background: #fff;
  font-size: 13px;
}
.coming > div:first-of-type {
  margin-left: 15px;
  font-size: 14px;
}
.mainitem {
  display: flex;
  padding: 12px 14px 12px 0;
  margin-left: 15px;
  height: 90px;
  max-height: 90px;
  position: relative;
  margin-bottom: 1px;
  border-bottom: 1px solid #ccc;
}
.item {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin-left: 10px;
}
.title {
  width: 200px;
  color: #333;
  font-size: 17px;
  font-weight: bold;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.person {
  color: #faaf00;
  font-size: 15px;
  font-weight: 700;
}
button {
  width: 47px;
  height: 27px;
  border-radius: 5px;
  position: absolute;
  right: 20px;
  top: 40px;
  border: 1px solid #fff;
  background: #3c9fe6;
  color: #fff;
}
.want {
  background: #faaf00;
}
</style>